<!--
 * @Description: 大屏模版1
 * @Author: zhouxiaomin
 * @Date: 2022-01-18 20:46:18
 * @LastEditors: gaoyunpeng
-->
<template>
  <div class="home-div-template">
    <!-- 头部区域 -->
    <header1 tname="标题"> </header1>
    <!-- 内容区域 -->
    <div class="home-body">
      <!-- 左边布局 -->
      <div class="screen-left">
        <dv-border-box-8 style=" padding: 5px"></dv-border-box-8>
        <dv-border-box-8 style=" padding: 5px"></dv-border-box-8>
      </div>
      <!-- 中间布局 -->
      <div class="screen-middle">
        <dv-border-box-8 style=" height:130%;padding: 5px"></dv-border-box-8>
        <dv-border-box-8 style=" height:70%;padding: 5px"></dv-border-box-8>
      </div>
      <!-- 右边布局 -->
      <div class="screen-right">
        <dv-border-box-8 style=" padding: 5px"></dv-border-box-8>
        <dv-border-box-8 style=" padding: 5px"></dv-border-box-8>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import header1 from '../../../components/header/header1.vue';
@Component({
  components: {
    header1
  }
})
export default class Template1 extends Vue {}
</script>

<style scoped lang="scss">
.home-div-template {
  width: 100%;
  height: 100%;
  .home-body {
    display: flex;
    width: 100%;
    height: calc(100% - 100px);
    .screen-left {
      display: flex;
      flex-direction: column;
      width: 450px;
    }
    .screen-middle {
      display: flex;
      flex-direction: column;
      flex: 1;
    }
    .screen-right {
      display: flex;
      flex-direction: column;
      width: 450px;
    }
  }
}
</style>
